<template>
    <div class="p1">
        <HouseLeftNavigation :navList="navList.data" :defaultClick="navList.defaultClick" @returnData="setPage">
        </HouseLeftNavigation>

        <div class="t15" v-if="!leftIndex">
            <div class="t0">
                <div class="t2">{{ $t('text.House.l265') }}</div>

                <div class="t7" v-for="item in reportList" v-bind:key="item" @click="getClickItem(item.id)">
                    <div style="flex: 1;">
                        <div class="t8">{{ item.newHouseName == null ? '-' : item.newHouseName }}</div>
                        <div class="t9">
                            <span class="t10" v-if="item.status == '1'">{{ $t('text.House.l268') }}</span>
                            <span class="t11" v-if="item.status == '2'">{{ $t('text.House.l269') }}</span>
                            <span class="t12" v-if="item.status == '3'">{{ $t('text.House.l270') }}</span>
                            <span class="t13" v-if="item.status == '4'">{{ $t('text.House.l271') }}</span>
                            <span class="t21" v-if="item.status == '5'">{{ $t('text.House.l304') }}</span>
                            <span class="t22" v-if="item.status == '6'">{{ $t('text.House.l305') }}</span>
                            <span class="t14" v-if="item.status == '7'">{{ $t('text.House.l272') }}</span>
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="t8">
                            {{ item.customerName == null ? '-' : item.customerName }}&emsp;TEL·
                            {{ item.customerPhone == null ? '-' : item.customerPhone }}
                        </div>
                        <div class="t9">{{ item.visitTime == null ? '-' : item.visitTime }}&emsp;{{ $t('text.House.l266') }}
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="t8">{{ item.reportUserName == null ? '-' : item.reportUserName }}</div>
                        <div class="t9">{{ item.createTime == null ? '-' : item.createTime }}&emsp;{{ $t('text.House.l267')
                        }}</div>
                    </div>
                </div>
            </div>

            <div class="t16">
                <div class="t17">
                    <div>{{ clickItem.newHouseName == null ? '-' : clickItem.newHouseName }}</div>
                    <img src="../../assets/images/h50.svg" class="copy" @click="copy">
                </div>
                <div class="t9" style="border-bottom: 1px solid #eee;">
                    <span class="t10" v-if="clickItem.status == '1'">{{ $t('text.House.l268') }}</span>
                    <span class="t11" v-if="clickItem.status == '2'">{{ $t('text.House.l269') }}</span>
                    <span class="t12" v-if="clickItem.status == '3'">{{ $t('text.House.l270') }}</span>
                    <span class="t13" v-if="clickItem.status == '4'">{{ $t('text.House.l271') }}</span>
                    <span class="t21" v-if="clickItem.status == '5'">{{ $t('text.House.l304') }}</span>
                    <span class="t22" v-if="clickItem.status == '6'">{{ $t('text.House.l305') }}</span>
                    <span class="t14" v-if="clickItem.status == '7'">{{ $t('text.House.l272') }}</span>
                </div>
                <div class="t17">{{ $t('text.House.l273') }}</div>
                <div class="t18">{{ $t('text.House.l274') }}&ensp;<span>{{ clickItem.customerName == null ? '-' :
                    clickItem.customerName }}</span></div>
                <div class="t18">{{ $t('text.House.l275') }}&ensp;<span>{{ clickItem.sex == null ? '-' : clickItem.sex
                }}</span></div>
                <div class="t18">{{ $t('text.House.l276') }}&ensp;<span>{{ clickItem.customerPhone == null ? '-' :
                    clickItem.customerPhone }}</span></div>
                <div class="t18">{{ $t('text.House.l277') }}&ensp;<span>{{ clickItem.visitNum == null ? '-' :
                    clickItem.visitNum }}</span></div>
                <div class="t18">{{ $t('text.House.l278') }}&ensp;<span>{{ clickItem.visitTime == null ? '-' :
                    clickItem.visitTime }}</span></div>
                <div class="t17">{{ $t('text.House.l279') }}</div>
                <div class="t18">{{ $t('text.House.l280') }}&ensp;<span>{{ clickItem.reportUserName == null ? '-' :
                    clickItem.reportUserName }}</span></div>
                <div class="t18">{{ $t('text.House.l276') }}&ensp;<span>{{ clickItem.reportUserPhone == null ? '-' :
                    clickItem.reportUserPhone }}</span></div>
                <div class="t18">{{ $t('text.House.l281') }}&ensp;<span>{{ clickItem.createTime == null ? '-' :
                    clickItem.createTime }}</span></div>
                <div class="t18">{{ $t('text.House.l282') }}&ensp;<span>{{ clickItem.reportOrgName == null ? '-' :
                    clickItem.reportOrgName }}</span></div>
                <div class="t18">
                    {{ $t('text.House.l283') }}&ensp;
                    <span class="notes">{{ clickItem.notes == null ? '-' :clickItem.notes }}</span>
                </div>
                <div class="t19">
                    <div class="t20">{{ $t('text.House.l284') }}</div>
                </div>
            </div>
        </div>

        <!--带看记录-->
        <div class="t0" v-if="leftIndex" style="padding: 30px;">
            <div class="t2">{{ $t('text.House.l37') }}</div>
            <div class="t4">
                <div v-for="(item, index) in titleList" v-bind:key="item" class="t5"
                    :style="index == 1 || index == 5 ? { flex: 0.7 } : ''">{{ item }}</div>
            </div>
            <div v-infinite-scroll="load" class="infinite-list" style="overflow: auto;height: 100%;padding: 0;margin: 0;">
                <div class="t6" v-for="item in dataList" v-bind:key="item">
                    <TakeLookList :dataList="item"></TakeLookList>
                </div>
                <el-divider v-if="loading">
                    {{ $t('text.House.l207') }}
                </el-divider>
                <el-divider v-if="disabled">
                    {{ $t('text.House.l48') }}
                </el-divider>
            </div>
        </div>

    </div>
</template>
    
<script>
import HouseLeftNavigation from '@/components/navigation/HouseLeftNavigation.vue'
import { findPageByNewHouseId, reportFindPage, reportGetDetailById } from '../../http/api'
import { ElMessage } from 'element-plus'
import TakeLookList from '@/components/houseList/TakeLookList.vue'

import pinia from '../../store'
import { useHouse } from '../../store/houseShareData'

export default {
    name: 'TakeLookDetail',
    components: {
        HouseLeftNavigation,
        TakeLookList
    },
    data() {
        return {
            titleList: [this.$t('text.House.l39'), this.$t('text.House.l40'), this.$t('text.House.l41'),
            this.$t('text.House.l42'), this.$t('text.House.l43'), this.$t('text.House.l44'), this.$t('text.House.l45')],
            dataList: [],
            reportList: [],
            leftIndex: 0,
            navList: {
                defaultClick: this.$t('text.House.l265'), data: [
                    { name: this.$t('text.House.l265'), img: require('../../assets/images/h2.svg'), count: 2 },
                    { name: this.$t('text.House.l37'), img: require('../../assets/images/h1.svg'), count: 2 },
                ]
            },
            clickItem: {},
            page:1,
            loading: false,
            disabled: false
        }
    },
    mounted() {
        this.getReport()
        this.getData()

    },
    methods: {
        getData() {
            findPageByNewHouseId({ houseId: this.$route.query.id, page: this.page, size: 20}).then(res => {
                if (res !== undefined) {
                    if (res.dataList.length == 0) {
                        this.loading = false
                        this.disabled = true
                    } else {
                        this.dataList = [...this.dataList, ...res.dataList]
                        this.loading = false
                    }
                    console.log(res)
                }
            }).catch()
        },
        getReport() {
            reportFindPage({ newHouseId_EQ: this.$route.query.id }).then(res => {
                if (res !== undefined) {
                    this.reportList = res
                    console.log(res)
                }
            }).catch()
        },
        load() {
            if (!this.loading && !this.disabled)
                if (this.dataList.length % 20 == 0 && this.dataList.length != 0) {
                    this.page = this.page + 1
                    this.loading = true
                    this.getData()
                } else {
                    this.disabled = true
                }
        },
        setPage(index) {
            this.leftIndex = index
        },
        getClickItem(id) {
            reportGetDetailById({ id: id }).then(res => {
                if (res !== undefined) {
                    this.clickItem = res
                    console.log(res)
                }
            }).catch()
        },
        copy() {
            const textarea = document.createElement('textarea');
            let temp = {
                [this.$t('text.House.l303')]: this.clickItem.newHouseName,
                [this.$t('text.House.l273')]: [
                    { [this.$t('text.House.l274')]: this.clickItem.customerName },
                    { [this.$t('text.House.l275')]: this.clickItem.sex },
                    { [this.$t('text.House.l276')]: this.clickItem.customerPhone },
                    { [this.$t('text.House.l277')]: this.clickItem.visitNum },
                    { [this.$t('text.House.l278')]: this.clickItem.visitTime },
                ],
                [this.$t('text.House.l279')]: [
                    { [this.$t('text.House.l280')]: this.clickItem.reportUserName },
                    { [this.$t('text.House.l276')]: this.clickItem.reportUserPhone },
                    { [this.$t('text.House.l281')]: this.clickItem.createTime },
                    { [this.$t('text.House.l282')]: this.clickItem.reportOrgName },
                    { [this.$t('text.House.l283')]: this.clickItem.notes },
                ],
            }
            textarea.value = this.formatObjectToText(temp);
            document.body.appendChild(textarea);
            // 选择并复制文本
            textarea.select();
            document.execCommand('copy');
            // 移除临时textarea元素
            document.body.removeChild(textarea);
            ElMessage.success({
                showClose: true,
                message: this.$t("text.Common.l21"),
                type: 'success',
            })
        },
        //文本格式化
        formatObjectToText(obj, level = 0) {
            const indent = '  '.repeat(level);
            let result = '';
            for (const key in obj) {
                const value = obj[key];
                if (typeof value === 'object') {
                    if (Array.isArray(value)) {
                        // 处理数组的情况
                        result += `${indent}${key} [\n`;
                        for (const item of value) {
                            if (typeof item === 'object') {
                                // 如果数组元素是对象，则进一步处理
                                result += `${this.formatObjectToText(item, level + 2)}`;
                            } else {
                                // 否则直接输出
                                result += `${indent}  ${item},\n`;
                            }
                        }
                        result += `${indent}],\n`;
                    } else {
                        // 处理嵌套对象的情况
                        result += `${indent}${key} [\n${this.formatObjectToText(value, level + 1)}${indent}],\n`;
                    }
                } else {
                    // 处理基本值
                    result += `${indent}${key} ${value},\n`;
                }
            }
            return result;
        }


    },
    watch: {
        houseTakeLook() {
            this.dataList = []
            this.page = 1
            this.getData()
        },
        newHouseReport() {
            this.getReport()
        }
    },
    computed: {
        houseTakeLook() {
            return useHouse(pinia).houseTakeLook
        },
        newHouseReport() {
            return useHouse(pinia).newHouseReport
        }
    },


}
</script>
    
<style scoped>
.copy {
    width: 25px;
    height: 25px;
}

.notes {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.t0 {
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    padding-bottom: 5px;
    flex: 3;
}

.p1 {
    width: 100%;
    display: flex;
    overflow: hidden;
    height: 100%;
}

.t2 {
    font-size: 14px;
    color: black;
    text-align: left;
}

.t3 {
    font-size: 13px;
    color: gray;
    text-align: left;
    padding-left: 35px;
}

.t4 {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 20px;
}

.t5 {
    flex: 1;
    font-size: 13px;
    color: gray;
    padding-top: 20px;
    padding-bottom: 20px;
}

.t6 {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    align-items: center;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ececec;
}

.t7 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-left: 35px;
    border-bottom: 1px solid #ddd;
    gap: 20px;
}

.t8 {
    font-size: 13px;
    color: black;
    text-align: left;

}

.t9 {
    font-size: 12px;
    color: gray;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 15px;
}

.t10 {
    background-color: #f59b22;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t11 {
    background-color: #02bfbf;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t12 {
    background-color: #ec808d;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t13 {
    background-color: #c081ff;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t14 {
    background-color: #aaaaaa;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t15 {
    display: flex;
    padding-top: 30px;
    flex: 1;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 5px;
}

.t16 {
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    flex: 1;
    text-align: left;
    border-left: 1px solid #eee;
    gap: 15px;
}

.t17 {
    color: black;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.t18 {
    color: #555;
    font-size: 13px;
    padding-left: 15px;
    display: flex;
    word-break: keep-all;
}

.t19 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
}

.t20 {
    background: #6698ff;
    margin: 50px 0 30px 30px;
    color: white;
    border-radius: 6px;
    padding: 7px 5px;
    text-align: center;
    font-size: 13px;
    width: 160px;
}

.t21 {
    background-color: #8080ff;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}

.t22 {
    background-color: #429df8;
    color: white;
    font-size: 12px;
    padding: 2px 7px;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
}
</style>